<template>
    <div>
        <mt-header title="爱阅读">
            <div v-if="$store.state.islogin" slot=right>
                欢迎：{{$store.state.username}}
            </div>
            <div v-else slot="right">
                <router-link class="r1" to="/register">注册</router-link>&nbsp;|
                <router-link class="r1" to="/login">登录</router-link>
            </div>
        </mt-header>
        <div>
            <div class="me_head">
                <img src="../assets/logo.png" alt="">
            </div>
        </div>
        <mt-cell title="账号与安全" href="account" is-link></mt-cell>
        <mt-cell title="收藏" href="collect" is-link></mt-cell>
        <mt-cell title="设置" href="setting" is-link></mt-cell>
        <mt-cell title="帮助与反馈" href="assist" is-link></mt-cell>
        <mt-cell title="服务中心" href="service" is-link></mt-cell>
        <mt-cell title="关于APP" href="about" is-link></mt-cell>
        <mt-button v-if="$store.state.islogin" @click="logout" type="primary" size="large">退出登录</mt-button>

        <!--底部选项卡-->
        <mt-tabbar v-model="selected" fixed>
            <mt-tab-item id="home">
                <img src="../assets/common/main_1.png" v-if="selected=='home'" slot="icon">
                <img src="../assets/common/main_0.png" v-else slot="icon">
                首页
            </mt-tab-item>
            <mt-tab-item id="me">
                <img src="../assets/common/me_1.png" v-if="selected=='me'" slot="icon">
                <img src="../assets/common/me_0.png" v-else slot="icon">
                我的
            </mt-tab-item>
        </mt-tabbar>
    </div>
</template>

<script>
export default {
    data() {
        return {
            selected:"me"
        }
    },
    methods: {
        logout(){
            sessionStorage.clear()
            window.location.reload()
        }
    },
    watch: {
        selected(newval){
        // 一旦选择了其它选项卡，触发selected的变化
        if(newval=='home'){
            this.$router.push('/')
        }else if(newval=='me'){
            this.$router.push('/me')
        }
        }
    }
}
</script>
<style>
.r1{
    color:white;
}

.me_head img{
    width: 100px;
    /* height: 100px; */
    background-color:rgb(247, 241, 241);
    border-radius: 50%;
    border:1px solid rgb(247, 241, 241);
    display: block;
    margin: 10px auto;
}

</style>
